<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button
          type="primary"
          v-if="hasPermission(['dataSet:add'])"
          @click="handleCreate"
        >
          新增
        </a-button>
        <a-button
          type="success"
          v-if="hasPermission(['dataSet:add'])"
          @click="handleCreate"
        >
          参数验证规则维护(预留)
        </a-button>
        <a-button type="error" v-if="showTrans" @click="testData"
          >数据测试</a-button
        >
        <a-button
          @click="handleExport"
          v-if="hasPermission(['dataSet:export'])"
          preIcon="ant-design:file-excel-outlined"
          :loading="exportLoading"
        >
          导出
        </a-button>
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              auth: 'dataSet:edit',
              tooltip: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              auth: 'dataSet:delete',
              color: 'error',
              tooltip: '删除',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <EditModal @register="registerMainModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'DataSet',
});
</script>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { usePermission } from '@/hooks/web/usePermission';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useModal } from '@/components/Modal';
import { page, del, exp, getData } from '@/api/sys/dev/reportDataSetManager';
import { useMessage } from '@/hooks/web/useMessage';
import EditModal from './EditModal.vue';
const { createMessage } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerMainModal, { openModal: openMainModal }] = useModal();
const { hasPermission } = usePermission();
const [registerTable, { reload, getSelectRows }] = useTable({
  title: '列表',
  api: page,
  columns: [
    {
      title: '数据集key',
      align: 'center',
      dataIndex: 'setCode',
    },
    {
      title: '数据集名称',
      align: 'center',
      dataIndex: 'setName',
    },
    {
      title: '说明',
      align: 'center',
      width: 250,
      dataIndex: 'setDesc',
    },
    {
      title: '创建人',
      align: 'center',
      dataIndex: 'createUserStr',
    },
    {
      title: '创建时间',
      align: 'center',
      dataIndex: 'createTime',
    },
    {
      title: '更新人',
      align: 'center',
      dataIndex: 'updateUserStr',
    },
    {
      title: '更新时间',
      align: 'center',
      dataIndex: 'updateTime',
    },
  ],
  formConfig: {
    labelWidth: 120,
    schemas: [
      {
        field: 'setName',
        label: '数据集名称',
        component: 'Input',
        required: false,
      },
    ],
    baseColProps: { span: 6 },
  },
  rowSelection: {
    type: 'radio',
  },
  useSearchForm: true,
  pagination: true,
  bordered: true,
  showIndexColumn: false,
  actionColumn: {
    width: 120,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right',
  },
});
function handleCreate() {
  openMainModal(true, {
    isUpdate: false,
  });
  getData({ setCode: 'report_leased_bill', pageNo: 1, pageSize: 20 });
}
function handleEdit(record: Recordable) {
  openMainModal(true, {
    record,
    isUpdate: true,
  });
}
function handleEditVersion(record: Recordable) {
  openModal(true, {
    id: record.id,
  });
}
function handleDelete(record: Recordable) {
  del([record.id]).then(() => {
    createMessage.success('删除成功');
    reload();
  });
}
function handleSuccess() {
  reload();
}
let exportLoading = ref<Boolean>(false);
const handleExport = () => {
  exportLoading.value = true;
  exp()
    .then(() => {
      exportLoading.value = false;
    })
    .catch(() => {
      exportLoading.value = false;
    });
};
const showTrans = computed(() => {
  const selected = getSelectRows();
  if (selected && selected.length) {
    return true;
  }
  return false;
});

async function testData() {
  const selected = getSelectRows();
  await getData({ setCode: selected[0].setCode });
}
</script>
